<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON路径测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .success { border-left: 4px solid #4caf50; }
        .error { border-left: 4px solid #f44336; }
        .path { font-family: monospace; background: #eee; padding: 5px; }
        button {
            background: #2196f3;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 4px;
            margin: 5px;
        }
        button:hover { background: #1976d2; }
        pre { background: #263238; color: #aed581; padding: 10px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>JSON文件路径测试</h1>
    <button onclick="testAllPaths()">测试所有路径</button>
    <button onclick="clearResults()">清除结果</button>
    
    <div id="results"></div>

    <script>
        const paths = [
            '/data/personnel_portrait.json',
            '/assets/personnel_portrait.json',
            '/output/personnel_portrait.json',
            './data/personnel_portrait.json',
            '../output/personnel_portrait.json',
        ];

        async function testPath(path) {
            const resultDiv = document.createElement('div');
            resultDiv.className = 'test-item';
            
            try {
                console.log(`Testing: ${path}`);
                const response = await fetch(path);
                const contentType = response.headers.get('content-type');
                
                resultDiv.innerHTML = `
                    <div class="${response.ok ? 'success' : 'error'}">
                        <h3>路径: <span class="path">${path}</span></h3>
                        <p>状态: ${response.status} ${response.statusText}</p>
                        <p>内容类型: ${contentType || '无'}</p>
                    </div>
                `;
                
                if (response.ok && contentType && contentType.includes('json')) {
                    try {
                        const data = await response.json();
                        const sheets = Object.keys(data.sheets || {});
                        resultDiv.innerHTML += `
                            <p style="color: green;">✅ JSON解析成功!</p>
                            <p>工作表: ${sheets.join(', ')}</p>
                            <p>数据行数: ${data.sheets[sheets[0]]?.rowCount || 0}</p>
                            <details>
                                <summary>查看数据结构</summary>
                                <pre>${JSON.stringify(data, null, 2).substring(0, 500)}...</pre>
                            </details>
                        `;
                    } catch (e) {
                        resultDiv.innerHTML += `<p style="color: red;">❌ JSON解析失败: ${e.message}</p>`;
                    }
                } else {
                    const text = await response.text();
                    resultDiv.innerHTML += `<p style="color: orange;">⚠️ 响应内容（前200字符）:</p><pre>${text.substring(0, 200)}</pre>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="error">
                        <h3>路径: <span class="path">${path}</span></h3>
                        <p style="color: red;">❌ 请求失败: ${error.message}</p>
                    </div>
                `;
            }
            
            document.getElementById('results').appendChild(resultDiv);
        }

        async function testAllPaths() {
            clearResults();
            for (const path of paths) {
                await testPath(path);
            }
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }

        // 页面加载时自动测试
        window.addEventListener('load', testAllPaths);
    </script>
</body>
</html>

